<template>
  <div
    ref="chartBox"
    :id="id"
    :class="className"
    :style="{ height: height, width: width }"
  />
</template>

<script>
import tdTheme from "./theme.json"; // 引入默认主题
import "../map/fujian.js";
import ChartsMixins from "@/utils/newJs/chartsMixins";

export default {
  mixins: [ChartsMixins],
  name: "echart",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "2.5rem",
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // chart: null,
    };
  },

  watch: {
    options: {
      handler(options) {
        // 设置true清空echart缓存
        this.chart.setOption(options, true);
      },
      deep: true,
    },
  },
  mounted() {
    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
    this.initChart();
  },
  methods: {},
};
</script>

<style scoped lang="scss">
</style>
